<template>
  <div v-loading="loading">
    <!-- <el-form
      label-position="top"
      label-width="80"
      size="mini"
      v-for="(item,key) in service_list"
      :key="key"
      :disabled="!is_edit? true : false"
    >
      <el-card class="service-items" shadow="never">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item>
              <el-input placeholder="请输入服务名称" v-model="item.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-input placeholder="请输入价格" type="number" style="width:210px" v-model="item.price">
                <template slot="prepend">价格</template>
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-input placeholder="请输入划线价价格" type="number" style="width:210px" v-model="item.cost_price">
                <template slot="prepend">划线价</template>
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-input placeholder="请输入余位" type="number" style="width:210px" v-model="item.num">
                <template slot="prepend">余位</template>
                <template slot="append"><el-button icon="el-icon-delete" size="mini" @click="deleteService(key)" type="danger"></el-button></template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="服务描述">
          <el-input type="textarea" placeholder="请输入服务描述"  v-model="item.memo"></el-input>
        </el-form-item>
        <el-form-item label="服务详情">
          <quill-editor
            :options="editorOption"
            ref="myQuillEditor"
            @ready="onEditorReady($event)"
            v-model="item.detail"
            class="edit-itme"
          ></quill-editor>
        </el-form-item>
      </el-card>
    </el-form> -->
    <div class="serv-table serv-table-head">
      <div class="serv-table-td">服务名称</div>
      <div class="serv-table-td">服务价格</div>
      <div class="serv-table-td">划线价格</div>
      <div class="serv-table-td">服务数量</div>
      <div class="serv-table-td">操作</div>
    </div>
    <el-form :disabled="!is_edit? true : false" v-if="loading == false && service_list.length > 0">
      <div  v-for="(item,key) in service_list" :key="key" class="serv-table-body">
        <div class="serv-table ">
          <div class="serv-table-td">
            <el-input type="text" placeholder="请输入服务名称" v-model="item.name" size="mini"></el-input>
          </div>
          <div class="serv-table-td">
            <el-input type="number" placeholder="请输入服务价格" v-model="item.price" size="mini">
              <template slot="append">元</template>
            </el-input>
          </div>
          <div class="serv-table-td">
            <el-input type="number" placeholder="请输入服务划线价格" v-model="item.cost_price" size="mini">
              <template slot="append">元</template>
            </el-input>
          </div>
          <div class="serv-table-td">
            <el-input type="number" placeholder="请输入服务数量" v-model="item.num" size="mini"></el-input>
          </div>
          <div class="serv-table-td">
            <el-tooltip class="item" effect="dark" content="编辑描述" placement="top-start">
              <!-- <el-button size="mini" circle icon="el-icon-edit-outline" @click="editServ(key,0)"></el-button> -->
              <span class="ser-btns"><i class="el-icon-edit-outline" @click="editServ(key,0)"></i></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="图文详情" placement="top-start">
              <span class="ser-btns"><i class="el-icon-document" @click="editServ(key,1)"></i></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
              <el-button size="mini" circle icon="el-icon-delete" @click="deleteService(key)"></el-button>
            </el-tooltip>
          </div>
          
        </div>
        <div class="serv-table-tags-box" v-if="ser_index == key">
          <div class="serv-table-tags" :style="'margin-right:calc(20% - '+(34 + (btn_index * 28) +(btn_index * 10))+'px)'"></div>
        </div>
        <div class="serv-table-memo" v-if="ser_index == key && btn_index == 0">
          <el-input type="textarea" placeholder="请输入服务描述"  v-model="item.memo" maxlength="50" show-word-limit></el-input>
        </div>
        <div class="serv-table-memo" v-if="ser_index == key && btn_index == 1">
          <div style="background:#fff; height:100%;">
            <quill-editor
              :options="editorOption"
              ref="myQuillEditor"
              @ready="onEditorReady($event)"
              v-model="item.detail"
              class="serv-edit-itme"
            ></quill-editor>
          </div>
        </div>
      </div>
    </el-form>
    <div class="serv-empty" v-if="loading == false && service_list.length == 0">
      暂无服务信息
    </div>
    <div v-if="is_edit" style="margin-top:20px;">
      <el-button size="mini" icon="el-icon-plus" class="com-btn" @click="addService()">附加服务</el-button>
    </div>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import quillConfig from "../../../assets/js/quill-config.js";

export default {
  components : { quillEditor },
  data() {
    return {
      service_list: [],
      loading: false,
      editorOption: quillConfig,
      ser_index : -1,
      btn_index : 0
    };
  },
  props: { active_id: {}  ,is_edit:{}},
  mounted() {
    if (this.active_id > 0) this.getData();
    
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  },
  methods: {
    //编辑服务按钮
    editServ(key,index){
      if(this.ser_index == key && this.btn_index == index) {
        return this.ser_index = -1;
      }
      this.ser_index = key;
      this.btn_index = index;
    },
    /**
     * 获取数据
     */
    getData() {
      this.loading = true;
      this.ajaxs("active/getServiceInfo", {
        data: { active_id: this.active_id },
        success: res => {
          this.service_list = res.msg;
          this.loading = false;
        }
      });
    },
    /**
     * 添加服务
     */
    addService() {
      this.service_list.push({ name: "", price: "",cost_price : '', num: '' ,memo : '',detail : ''});
      var len = this.service_list.length;
      this.ser_index = len - 1;
    },
    /**
     * 删除服务
     */
    deleteService(key) {
      var name = this.service_list[key].name;
      if(name == '')name = '未命名服务';
      this.$confirm('确定删除服务【'+name+'】?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.service_list.splice(key, 1);
        if(key == this.ser_index) {
          this.ser_index = -1;
        }
      }).catch(() => {         
      });
      
    },
    onEditorReady(editor) {},
  },
  watch: {
    service_list: {
      handler(v, o) {
        for(var i in this.service_list){
          if(this.service_list[i].price < 0)this.service_list[i].price = 1;
          if(this.service_list[i].cost_price < 0)this.service_list[i].cost_price = 1;
          if(this.service_list[i].num < 0)this.service_list[i].num = 1;
        }
        this.$emit("change", this.service_list);
      },
      deep: true
    }
  }
};
</script>

<style>
.ser-btns{display: inline-block;width: 28px;height: 28px;border-radius: 50%;border:1px solid #EBEEF5;margin-right: 10px;line-height: 28px;text-align: center;vertical-align: middle;cursor: pointer;}
.ser-btns i{line-height: 28px;}
.serv-table-body{position: relative;border-bottom:1px solid #e1e1e1;}
.serv-table-head{background: #f8f8f8;border-top:1px solid #e1e1e1;}
.serv-edit-itme{height: 266px}
.serv-edit-itme .ql-container{height: 200px;}
.service-items{padding-bottom: 20px;background: #fff;}
.serv-table{overflow: hidden;padding:10px 0;border-left:1px solid #e1e1e1;border-right:1px solid #e1e1e1;}
.serv-table-td{float: left; width: 20%;padding: 0 10px;}
.serv-table-tags-box{height: 20px;overflow: hidden;border-left:1px solid #e1e1e1;border-right:1px solid #e1e1e1;}
.serv-table-memo{
  width: 100%;
  background: #f8f8f8;
  padding: 10px;
  border-left:1px solid #e1e1e1;border-right:1px solid #e1e1e1;
}
.serv-table-tags{
  border:10px solid transparent;
  border-bottom-color: #f8f8f8;
  float: right;
  margin-right: calc(20% - 34px);
  
}
.serv-empty{height: 60px;line-height: 60px;text-align:center;color: #aaa;border-left:1px solid #e1e1e1;border-right:1px solid #e1e1e1;border-bottom:1px solid #e1e1e1;}
</style>